<template>
  <div class="playlist-page">
    <div class="content">
      <div class="head">
        <div class="left">
          <h2>全部</h2>
          <span>选择分类</span>
        </div>
        <div class="right">
          <router-link to="">热门</router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'playlist-page',
  props: {},
  data: function () {
    return {
      message: 'playlist',
    }
  },
  methods: {}
}
</script>

<style scoped>
.playlist-page{
  border: 1px solid;
  .content{
    width: 1100px;
    margin: auto;
    padding: 20px;
    .head{
      display: flex;
      background-color:pink ;
      padding: 10px 0;
      border-bottom: 2px solid #c20c0c;
      justify-content: space-between;
      .left{
        display: flex;
        span{
          cursor: pointer;
          padding: 10px;
          font-size: 12px;
          color: blue;
          background: linear-gradient(to bottom, #ffffff, #e2e2e2);
          &:hover{
            background: linear-gradient(to bottom, #ffffff, #e2e2e2);

          }

        }
      }
      .right{
        display: flex;
        align-items: center;
        a{
          padding: 5px 10px;
          color: white;
          border-radius: 5px;
          font-size: 13px;
          background: linear-gradient(to bottom, #d20c0d, #a00707);
          &:hover {
            text-decoration: underline;
          }

        }
      }

    }
  }
}
</style>

